<template>
  <h1>{{ sum }}</h1>
  <button @click="sum++">点击加1</button>
  <h1>{{ msg }}</h1>
  <button @click="msg+='!'">点击加！</button>
  <h1>{{ person.name }}</h1>
  <h1>{{ person.age }}</h1>
  <h1>{{ person.job.j1.salary }}</h1>
  <button @click="person.name+='-'">点击修改名字</button>
  <button @click="person.age++">点击修改年龄</button>
  <button @click="person.job.j1.salary++">涨</button>
</template>
  
<script>
import { ref, watch,reactive } from "vue";

export default {
  name: "Demo",
  //vue2写法
 /*  watch: {
    sum(news, olds) {
      console.log(news, olds);
    },
  },
  watch:{
    sum:{
      immediate:true,  //初始的时候进行一次监测
      deep:true  //进行深层的监视，就算里面的属性发生改变也监视得到
    }
  }, */

  setup() {
    let sum = ref(0);
    let msg=ref('你好阿')
    let person=reactive({
      name:'林润钿',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })

    //监视ref所定义的一个响应式数据
    watch(sum,(news,olds)=>{
      console.log(news,olds);
    })

    //监视ref所定义的多个响应式数据，可以写几个上面的那种
    watch([sum,msg],(news,olds)=>{
      console.log(news,olds);  //news跟olds都是数组了
    },{immediate:true,deep:true})

    /* 
    监视reactive所定义的一个响应式数据
    1.注意：此处无法正确的获取oldvalue
    2.注意：强制开启了深度监视（deep配置无效）
    */
    console.log('---------------------');
  /*   //监视整个reactive
    watch(person,(news,olds)=>
    {
      console.log(news,olds);
    }) */

    //监视reactive的某一个属性 可以查看olds 不能写person.age
   /*  watch(()=>person.age,(news,olds)=>{
      console.log(news,olds);
    }) */

    //监视reactive的某些属性 可以查看olds olds跟news都是数组
   /*  watch([()=>person.age,()=>person.name],(news,olds)=>{
      console.log(news,olds);
    }) */

    //监视reactive的job属性，默认不开启深层，所以我们得自己去配置 但是又不能查看老数据了
    watch(()=>person.job,(news,olds)=>{
      console.log(news,olds);
    },{deep:true})

   

    return {
      sum,
      msg,
      person
    };
  },
};
</script>
  
  <style>
</style>
  